<template>
  <div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单ID">
          <el-input v-model="searchForm.orderId" placeholder="请输入店铺名称" clearable />
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="searchForm.shopName" placeholder="请输入供应商" clearable />
        </el-form-item>
        <el-form-item label="分配时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
    </div>
    <el-table v-show="tableData.length > -1" :data="tableData" border>
      <el-table-column align="center" prop="order_id" label="订单ID" width="100" />
      <el-table-column align="center" prop="shopname" label="店铺名称" />
      <el-table-column align="center" prop="create_time" label="分单时间" />
      <el-table-column align="center" prop="end_time" label="失效时间" />
      <el-table-column align="center" label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.statusName=='订单关闭'"><el-tag type="danger">{{scope.row.statusName}}</el-tag></span>
          <span v-else><el-tag type="success">{{scope.row.statusName}}</el-tag></span>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" :page-size="pageSize"  @getList="getList" />
  </div>
</template>

<script>
import { supplierOrderList } from '@/api/user'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
export default {
  components: { customPage,myDatePicker },
  data() {
    return {
      searchForm: {
        shopName: '',
        orderId: '',
        orderCreateTime:''
      },
      total: 0,
      tableData: [],
      pageSize:50
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.orderCreateTime = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        shopName: '',
        orderId: '',
        orderCreateTime:''
      }
      this.routerName = ''
      this.getList()
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      this.searchForm.shopname = this.searchForm.shopname || this.routerName
      supplierOrderList({ page, pageSize:'50', ...this.searchForm }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'supplierView') {
      next(vm => {
        vm.getList()
      })
    } else {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
